<template>
  <vab-chart :option="option" @click="click" />
</template>

<script lang="ts" setup>
import { registerMap } from 'echarts/core'

defineOptions({
  name: 'ZkMap',
})

const option = reactive<any>({
  tooltip: {
    trigger: 'item',
  },
  grid: {
    top: '0%',
    left: '0%',
    right: '0%',
    bottom: '0%',
  },
})

const chinaData = ref<any>('')
const wuhanCenter = [114.383702, 30.666876]
const getMap = () => {
  axios({
    url: 'static/json/wuhan.json',
    method: 'get',
  }).then(({ data }) => {
    console.log('chinadata', data)
    chinaData.value = data
    registerMap('china', chinaData.value)

    option.geo = {
      map: 'china',
      type: 'map',
      selectedMode: 'single',
      select: {
        itemStyle: {
          color: '#fff',
          areaColor: 'rgba(49, 222, 100, .5)',
          borderColor: '#000',
          borderWidth: 3,
        },
      },

      zoom: 18,
      roam: true,
      center: wuhanCenter,
      label: {
        show: true,
        color: '#ffffff',
      },
      emphasis: {
        label: {
          show: true,
          color: '#ffffff',
        },
        itemStyle: {
          areaColor: '#01022e',
        },
      },
      itemStyle: {
        borderColor: 'rgba(147, 235, 248, 1)',
        borderWidth: 1,
        areaColor: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.8,
          colorStops: [
            {
              offset: 0,
              color: '#01022e', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#000', // 100% 处的颜色
            },
          ],
        },
        shadowColor: '#00a1ff',
        shadowOffsetX: -2,
        shadowOffsetY: 2,
        shadowBlur: 10,
      },
    }
    option.series = [
      {
        type: 'lines',
        coordinateSystem: 'geo',
        zlevel: 2,
        effect: {
          show: true,
          period: 6,
          trailLength: 0.7,
          symbol: 'arrow',
          symbolSize: 3,
        },
        lineStyle: {
          width: 0.1,
          opacity: 0.5,
          curveness: 0.3,
        },
        data: coordsData,
      },
    ]
  })
}

const geoCoordMap: any = {}

const coordsData: any = []

Object.keys(geoCoordMap).forEach((key) => {
  coordsData.push(
    {
      coords: [[...geoCoordMap[key]], [117.1582, 36.8701]],
    },
    {
      coords: [[117.1582, 36.8701], [...geoCoordMap[key]]],
    },
    {
      coords: [[...geoCoordMap[key]], [116.4551, 40.2539]],
    },
    {
      coords: [[116.4551, 40.2539], [...geoCoordMap[key]]],
    }
  )
})
const emit = defineEmits(['click'])
const click = (event: any) => {
  emit('click', event)
}

onBeforeMount(() => {
  getMap()
})

onMounted(() => {})
</script>
